<template>
  <FModal width="900" body-height="500" header="单位组管理" ref="refFModal">
    <FPage>
      <template #header>
        <el-form ref="searchForm" status-icon inline
                 style="height: 30px; padding: 5px"
                 class="group-manager-body-search simple-line-form"
                 :rules='[]' :model="searchParams">
          <el-form-item prop="groupName" label="组名">
            <el-input v-model="searchParams.groupName"/>
          </el-form-item>
          <el-form-item prop="groupCode" label="编码">
            <el-input v-model="searchParams.groupCode"/>
          </el-form-item>
          <el-form-item style="margin-left: 5px">
            <el-button icon="search" placeholder="请输入组名"
                       round type="primary" @click="search">搜索
            </el-button>
            <el-button icon="add" round @click="addNew">新建</el-button>
            <el-button icon="remove" round type="warning"
                       :disabled="!removeAble" @click="remove">删除
            </el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="rowClick"
                :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
                v-loading="loading">
        <el-table-column type="selection" width="40"/>
        <el-table-column show-overflow-tooltip sortable prop="groupName" label="组名"/>
        <el-table-column show-overflow-tooltip sortable prop="groupCode" label="编码"/>
        <el-table-column show-overflow-tooltip sortable prop="sort" label="排序号"/>
      </el-table>
      <template #footer>
        <div style="display: flex; justify-content: end; padding: 5px">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="pageOptions"
            background layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" small
            @size-change="search"
            @current-change="pageChange"
          />
        </div>
      </template>
    </FPage>
    <UnitGroupEditorComponent @saved="saved" ref="refUnitGroupEditorComponent"/>
    <template #footer>
      <el-button @click="cancel" type="warning" round icon="cancel" :loading="isLoading">取消</el-button>
    </template>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, nextTick, ref, shallowRef} from 'vue';
import {real} from '@/utils/CommonUtils';
import FPage from '@/components/layout/FPage.vue';
import TableSearchUtils from '@/utils/TableSearchUtils';
import {deleteAction, getAction} from '@/request/BaseRequest';
import UnitGroupEditorComponent from '@/views/system/UnitManagement/UnitGroupEditorComponent/index.vue';
import {ElMessage, ElMessageBox} from 'element-plus';

const refFModal = shallowRef();
const searchParams = ref({});
let unitData = undefined;
const searchForm = shallowRef();
const refUnitGroupEditorComponent = shallowRef();

function setData(_unitData) {
  unitData = real(_unitData);
  refFModal.value.open();
  nextTick(search);
}

function cancel() {
  refFModal.value.close();
}

function saved() {
  search();
}

function onRowClick(row) {
  refUnitGroupEditorComponent.value.setData(unitData, row);
}

function onSelection() {

}

function doSearch(params) {
  params.unitId = real(unitData).id;
  loading.value = true;
  getAction('/sys/group/loadGroups', params).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      setSearchResult(result);
    }
  });
}

function remove() {
  let id = real(selectedRows)[0].id;
  loading.value = true;
  getAction('/sys/group/canRemove', {id}).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      if (!result.canRemove) {
        ElMessage({
          message: result.message,
          type: 'warning',
        });
      } else {
        ElMessageBox.confirm('删除后不可恢复, 确定删除吗', '确定删除?', {
          draggable: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          doRemove(id);
        }).catch(() => {
        });
      }
    }
  });
}

function doRemove(id) {
  loading.value = true;
  deleteAction('/sys/group/remove', {id}).then(data => {
    loading.value = false;
    if (data.success) {
      search(true);
    }
  })
}

function addNew() {
  refUnitGroupEditorComponent.value.setData(unitData);
}

const removeAble = computed(() => {
  return real(selectedRows).length === 1;
});

const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: 'sort',
    order: 'ascending',
  },
  searchParams,
  selectionChange: onSelection,
  rowClick: onRowClick
});

defineExpose({
  setData
});

</script>
<script>
export default {
  name: 'GroupManagerModal'
};
</script>
<style>
.group-manager-body-search label {
  margin: 0;
  padding: 0 5px;
}
</style>
